<template>
  <div class="todo-header">
    <el-card>
      <el-form :model="todoForm" label-width="80px">
        <el-form-item label="待办事项">
          <el-input
            v-model="todoForm.title"
            placeholder="请输入待办事项"
            @keyup.enter="handleSubmit"
          />
        </el-form-item>

        <el-form-item label="截止日期">
          <el-date-picker
            v-model="todoForm.dueDate"
            type="datetime"
            placeholder="选择截止日期"
            format="YYYY-MM-DD HH:mm"
            value-format="YYYY-MM-DD HH:mm"
          />
        </el-form-item>

        <el-form-item label="优先级">
          <el-select v-model="todoForm.priority" placeholder="选择优先级">
            <el-option label="高" value="high" />
            <el-option label="中" value="medium" />
            <el-option label="低" value="low" />
          </el-select>
        </el-form-item>

        <el-form-item label="分类">
          <el-select
            v-model="todoForm.tags"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="选择或创建分类标签"
          >
            <el-option v-for="tag in availableTags" :key="tag" :label="tag" :value="tag" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSubmit">添加</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits(['submit-todo'])

const availableTags = ref(['工作', '学习', '生活', '娱乐'])

const todoForm = ref({
  title: '',
  dueDate: '',
  priority: 'medium',
  tags: [],
})

const handleSubmit = () => {
  if (!todoForm.value.title.trim()) {
    return
  }

  emit('submit-todo', {
    id: Date.now(),
    title: todoForm.value.title,
    completed: false,
    dueDate: todoForm.value.dueDate,
    priority: todoForm.value.priority,
    tags: todoForm.value.tags,
  })

  resetForm()
}

const resetForm = () => {
  todoForm.value = {
    title: '',
    dueDate: '',
    priority: 'medium',
    tags: [],
  }
}
</script>

<style scoped>
.todo-header {
  margin: 20px 0;
}

.el-form {
  max-width: 600px;
  margin: 0 auto;
}
</style>
